<template>
  <div>
    <Steps :current="status.currentStep" style="margin-bottom: 20px;">
      <Step title="设置"></Step>
      <Step title="对外展示"></Step>
      <Step title="内部管理"></Step>
      <Step title="产品区" v-if="standsModel.hasProductArea"></Step>
    </Steps>
    <Form :model="standsModel" ref="standsBaseInfoForm" :label-width="120" label-colon inline :show-message="false">
      <div v-show="status.currentStep == 0">
        <FormItem label="显示平台" prop="platform" required>
          <Select v-model="standsModel.platform" class="input_item" :disabled="isIndexType || isCategoryType">
            <Option v-for="item in platforms" :value="item.value" :key="item.value">{{item.label}}</Option>
          </Select>
          <div  v-if="isIndexType || isCategoryType">首页和分类展厅强制为PC和APP同步可见</div>
        </FormItem>
        <FormItem label="固定网址" prop="shortLinkName" :required="!isOnlyApp">
          <Input v-model.trim="standsModel.shortLinkName" class="input_item" placeholder="全部小写" @input.native="formatShortLink"
                  ></Input><br>
          <span >{{displayShortLink}}</span>
        </FormItem>
        <FormItem label="产品区" prop="hasProductArea">
          <Checkbox v-model="standsModel.hasProductArea" :disabled="isCategoryType">包含产品区</Checkbox>
        </FormItem>
        <FormItem label="SEO" prop="disableSeo">
          <Checkbox v-model="standsModel.disableSeo">禁用SEO</Checkbox>
        </FormItem>
      </div>
      <div v-show="status.currentStep === 1">
        <alert type="warning" v-if="isIndexType" >首页展厅不支持以下属性,无需填写。</alert>
        <alert type="warning" v-if="!isIndexType" >不填写标题会严重影响SEO的效果，建议必填！</alert>
        <FormItem label="标题" prop="title" >
          <Input v-model.trim="standsModel.title" class="input_item" :disabled="isIndexType" placeholder="用户可见，建议必填"></Input>
        </FormItem>
        <FormItem label="副标题" prop="subtitle">
          <Input v-model.trim="standsModel.subtitle" class="input_item" :disabled="isIndexType" placeholder="用户可见，可为空"></Input>
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input type="textarea" v-model="standsModel.description" class="input_item" :disabled="isIndexType" placeholder="用户可见，可为空"></Input>
        </FormItem>
      </div>

      <div v-show="status.currentStep === 2">
        <FormItem label="展厅内部名称" prop="name">
          <Input v-model.trim="standsModel.name" class="input_item" placeholder="内部属性，用户不可见"></Input>
        </FormItem>
        <FormItem label="标签" prop="tags">
          <Select v-model="standsModel.tags" class="input_item" multiple allow-create filterable placeholder="内部属性，用户不可见,可手动填写" @on-create="createTags">
            <Option v-for="(item, key) in tagList" :value="item" :key="key">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="备注" prop="note">
          <Input type="textarea" v-model="standsModel.note" class="input_item" placeholder="内部属性，用户不可见"></Input>
        </FormItem>
      </div>

      <div v-show="standsModel.hasProductArea && status.currentStep == 3">
        <FormItem label="产品集合标题" prop="collectionTitle">
          <Input type="text" v-model.trim="standsModel.collectionTitle" class="input_item"></Input>
        </FormItem>
        <FormItem label="产品集合类型" prop="collectionType" :required="standsModel.hasProductArea">
          <Select v-model="standsModel.collectionType" class="input_item" :disabled="isCategoryType">
            <Option v-for="item in collectionTypes" :value="item.value " :disabled="isCollectionCategoryType(item.value)"
                    :key="item.value" >{{item.label}}</Option>
          </Select>
          <div v-if="isCategoryType">已自动关联对应的分类产品</div>
        </FormItem>
        <FormItem label="组合条件"   v-if="isKeywordType">
          <Checkbox label="分类" v-model="standsModel.collectionHasCategory" @on-change="switchCondition(2)">分类</Checkbox>
          <Checkbox label="关键词" v-model="standsModel.collectionHasKeyword" @on-change="switchCondition(0)">关键词</Checkbox>
          <Checkbox label="上架日期" v-model="standsModel.collectionHasDate" @on-change="switchCondition(1)">上架日期</Checkbox>
        </FormItem>
        <FormItem label="关联分类"  prop="collectionClassificationId" v-if="isKeywordType&&standsModel.collectionHasCategory" >
          <Cascader :data="categoryTree"  :value="categoryCurrent" @on-change="categorySelected" change-on-select clearable placeholder="产品分类"
                    class="input_item"  transfer></Cascader>
        </FormItem>
        <FormItem label="搜索关键词" prop="collectionKeyword" :required="standsModel.collectionHasKeyword" v-if="isKeywordType&&standsModel.collectionHasKeyword" >
          <Input type="text" v-model.trim="standsModel.collectionKeyword" @input.native="formatKeyword" class="input_item" placeholder="例如 'girl dress'可过滤出童装的女生裙子"></Input>
        </FormItem>
        <FormItem label="上架日期" :required="standsModel.collectionHasDate&&!standsModel.collectionPublishedStartDate" v-if="isKeywordType&&standsModel.collectionHasDate">
          <Alert type="warning" >必须选择产品上架的起始日期，结束日期可以不选。</Alert>
          <DatePicker type="date" v-model="standsModel.collectionPublishedStartDate" :options="startDateOptions"  format="yyyy-MM-dd" class="y_condition" placeholder="选择起始日期" ></DatePicker>&nbsp;-&nbsp;
          <DatePicker type="date" v-model="standsModel.collectionPublishedEndDate" :options="endDateOptions"  format="yyyy-MM-dd" class="y_condition" placeholder="选择结束日期" ></DatePicker>
<!--          <br><span>已选日期范围：{{showDateRange}}</span>-->
        </FormItem>
        <FormItem label="过滤条件" prop="collectionFilters" v-if="isKeywordType&&standsModel.collectionHasKeyword">
          <Button type="primary" @click="addFilter()" icon="md-add">添加</Button>
        </FormItem>
        <div style="margin-bottom: 2rem" v-if="isKeywordType&&standsModel.collectionHasKeyword && standsModel.collectionFilters!=null && standsModel.collectionFilters.length>0">
          <div style="text-align: right;" v-for="(item, index) in standsModel.collectionFilters" :key="index">
            <ProductFilter :value="item"></ProductFilter>
            <Button type="error" icon="md-remove-circle" @click="removeFilter(index)" size="small" style="margin-left: 10px;">删除</Button>
          </div>
        </div>
        <FormItem label="屏蔽切面" prop="returnFilters" v-show="isKeywordType || isCategoryType">
          <Select v-model="standsModel.collectionReturnFilters" multiple class="input_item">
            <Option v-for="(item, index) in returnFilters" :key="index" :value="item.name">{{item.cnName+': '+item.name}}</Option>
          </Select>
        </FormItem>
      </div>
    </Form>
    <div style="text-align: right; margin-right: 2px;">
      <ButtonGroup>
        <Button type="primary" @click="prevStep()" :disabled="!isPrevStepButtonAvailable">
          <Icon type="ios-arrow-back"></Icon>上一步
        </Button>
        <Button type="primary" @click="nextStep()" :disabled="!isNextStepButtonAvailable">
          下一步<Icon type="ios-arrow-forward"></Icon>
        </Button>
      </ButtonGroup>
    </div>
  </div>
</template>

<script>
import tiyData from "./js/stand/list_data"
import commonData from "./js/stand/common_data"
import {createCategoryCascader, createCategoryList, getProductCommonData, isEmpty, isNotEmpty} from "../js/commonUtils";
import ProductFilter from "./productFilter/ProductFilter";

export default {
  name: "AStandForm",
  props: {
    standsModel: {type: Object, required: true},
    tagList: {type: Array, default(){return [];}},
  },
  components: {
    ProductFilter,
  },
  data() {
    return {
      status: tiyData.tStatus,
      categoryList: commonData.categoryList,
      standsTypes: commonData.standsDic.types,
      platforms: commonData.standsDic.platforms,
      // standsStates: commonData.standsDic.states,
      baseInfoRules: commonData.rules.standsRules,
      collectionTypes: commonData.collectionDic.types,
      filterList: commonData.collectionDic.filterList,
      categoryCurrent:[],
      returnFilters: commonData.returnFilters,
    }
  },
  methods: {
    createTags(val) {
      this.tagList.push(val);
    },
    changeStandsType(value) {
      if (value == commonData.standsDic.categoryType) {
        this.standsModel.hasProductArea = true;
      }
    },
    formatShortLink() {
      this.standsModel.shortLink = this.standsModel.shortLinkName.replaceAll(" ", "-").toLowerCase()+"/";
      if(!this.isIndexType){
        this.standsModel.shortLink = isEmpty(this.standsModel.shortLinkName) ? "" : this.standsModel.shortLinkName + ".html";
      }
    },
    formatKeyword() {
      if (this.standsModel.collectionType == commonData.collectionDic.keywordType) {
        this.standsModel.collectionKeyword = this.standsModel.collectionKeyword.toLowerCase();
      }
    },
    categorySelected(value, selectedData) {
      this.categoryCurrent=[]
      if (0 < selectedData.length) {
        this.standsModel.collectionClassificationId = selectedData[selectedData.length - 1].value;
        this.categoryCurrent.push(this.standsModel.collectionClassificationId)
      } else {
        this.standsModel.collectionClassificationId = '';
        this.categoryCurrent=[]
      }
    },
    addFilter() {
      this.standsModel.collectionFilters.push({field: "", value: ""});
    },
    removeFilter(index) {
      this.standsModel.collectionFilters.splice(index, 1);
    },
    prevStep() {
      this.status.currentStep--;
    },
    nextStep() {
      this.status.currentStep++;
      if(this.status.currentStep==3){
        this.categoryCurrent=[];
        if(this.standsModel.collectionClassificationId){

          this.initCategorySelection();
        }
      }

    },

    initCategorySelection() {
      this.categoryCurrent = [];
      if(isNotEmpty(this.standsModel.collectionClassificationId)){
        let cat1Index = this.categoryTree.findIndex(cat => cat.value == this.standsModel.collectionClassificationId);
        if(cat1Index > -1) {
          this.categoryCurrent = [this.standsModel.collectionClassificationId];
        } else {
          for(let cat1 of this.categoryTree) {
            if(cat1.children != null && cat1.children.length > 0) {
              let cat2Index = cat1.children.findIndex(cat => cat.value == this.standsModel.collectionClassificationId);
              if(cat2Index > -1) {
                this.categoryCurrent = [cat1.value, this.standsModel.collectionClassificationId];
                break;
              } else {
                for(let cat2 of cat1.children) {
                  if(cat2.children != null && cat2.children.length > 0) {
                    let cat3Index = cat2.children.findIndex(cat => cat.value == this.standsModel.collectionClassificationId);
                    if(cat3Index > -1) {
                      this.categoryCurrent = [cat1.value, cat2.value, this.standsModel.collectionClassificationId];
                      break;
                    }
                  }
                }
              }
            }
          }
        }
      }
    },

    isCollectionCategoryType(type) {
      return type == commonData.collectionDic.categoryType;
    },
    changeCollectionType() { //变更产品集合类型
      this.standsModel.collectionKeyword = "";
      this.dateRange.startDate = "";
      this.dateRange.endDate = "";
      this.$ySpliceAll(this.standsModel.collectionFilters);
      this.addDateSearch = false;
      this.addKeyword = false;
    },

    dateStartChange(strDate, date) { //上架日期变更
      this.standsModel.collectionPublishedStartDate = strDate;
    },
    dateEndChange(strDate, date) {
      this.standsModel.collectionPublishedEndDate = strDate;
    },
    switchCondition(type) {
      if (type == 0 && !this.standsModel.collectionHasKeyword) {
        this.standsModel.collectionKeyword = "";
      } else if (type == 1 && !this.standsModel.collectionHasDate) {
        this.standsModel.collectionPublishedStartDate = "";
        this.standsModel.collectionPublishedEndDate = "";
      } else if (type == 2 && !this.standsModel.collectionHasCategory) {
        this.standsModel.collectionClassificationId = "";
        this.categoryCurrent.splice(0);
      }
    }
  },
  computed: {
    isIndexType() {
      return this.standsModel.type == commonData.standsDic.indexPageType;
    },
    isCategoryType() {
      return this.standsModel.type == commonData.standsDic.categoryType && this.standsModel.collectionType == commonData.collectionDic.categoryType;
    },
    isCommonType() {
      return this.standsModel.type == commonData.standsDic.commonType;
    },
    isKeywordType() {
      return this.standsModel.collectionType == commonData.collectionDic.keywordType;
    },
    isDateRangeType() {
        return this.standsModel.collectionType == commonData.collectionDic.dateRangeType;
    },
    isPrevStepButtonAvailable() {
      return this.status.currentStep > 0;
    },
    isNextStepButtonAvailable() {
      if(this.standsModel.hasProductArea) {
        return this.status.currentStep < 3;
      }else{
        return this.status.currentStep < 2;
      }
    },
    displayShortLink() {
      return this.$store.getters.webDomain + (isEmpty(this.standsModel.shortLink)?"":this.standsModel.shortLink);
    },
    isOnlyApp() {
        return this.standsModel.platform == 2;
    },

    categoryTree(){
      let categoryLevel1 = [];
      commonData.categoryList.forEach(item=>{
        let item_copy = JSON.parse(JSON.stringify(item));
        // item_copy.children = [];
        categoryLevel1.push(item_copy);
      });
      return categoryLevel1;
    },
    startDateOptions() {
      let _self = this;
      return {
        disabledDate(date) {
          if (_self.standsModel.collectionPublishedEndDate != '') {
            return date && date.valueOf() >= new Date(_self.standsModel.collectionPublishedEndDate).valueOf();
          } else {
            return false
          }
        }
      }
    },
    endDateOptions() {
      let _self = this;
      return {
        disabledDate(date) {
          if (_self.standsModel.collectionPublishedStartDate != '') {
            return date && date.valueOf() <=new Date(_self.standsModel.collectionPublishedStartDate).valueOf();
          } else {
            return false
          }
        }
      }
    },
    // categoryCurrent(){
    //   var categoryCurrent = [];
    //   if(this.standsModel.collectionClassificationId!=''){
    //     categoryCurrent.push(this.standsModel.collectionClassificationId)
    //   }
    //   return categoryCurrent;
    // },

  },
  mounted() {
    if(commonData.categoryList.length == 0) {
      let types = [];
      types.push(3);//查询产品分类
      getProductCommonData(this, commonData.categoryList, types, true, createCategoryCascader);
    }

  },
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base.less";

.input_item{
  width:400px;
  @media @mobile{
    width: 200px;
  }
}

</style>
